<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表排序</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>人员列表）</h2>
            <input type="text" placeholder="请输入名字进行过滤" v-model="keyWord">
            <button @click="sortType=1">年龄升序</button>
            <button @click="sortType=2">年龄降序</button>
            <button @click="sortType=0">原顺序</button>
            <ul>
                <li v-for="(p, index) of filterPersons" :key="index">
                    {{p.name}}: {{p.age}}： {{p.sex}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 使用计算属性实现列表过滤
            new Vue({
                el: '#root',
                data: {
                    keyWord: '',
                    persons: [
                        {name: "周冬雨", age: 18, sex: '女'},
                        {name: "马冬梅", age: 19, sex: '女'},
                        {name: "周杰伦", age: 20, sex: '男'},
                        {name: "温兆伦", age: 21, sex: '男'}
                    ],
                    sortType: 0
                },
                computed: {
                    filterPersons: function() {
                        const arr = this.persons.filter((p)=>{
                            console.log(this)
                                return p.name.indexOf(this.keyWord) != -1
                            })
                        
                        if(this.sortType){
                            arr.sort((p1, p2)=>{
                                return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
                            })
                        }

                        return arr
                    }
                }
            })
        </script>
    </body>
</html>
